<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="50%"
    center
    custom-class="viewresult-content-page"
    :before-close="handleClose"
    @close="handleClose"
  >
    <div id="page" v-loading="loading" class="main-content">
      <i class="el-icon-close" @click="handleClose" />
      <div class="title">{{ detailParams.title }}</div>
      <div class="push-date-box">
        <span>发布日期：</span>
        <span>{{ detailParams.releaseTime || '尚未发布' }}</span>
      </div>
      <p class="edit-content" v-html="detailParams.resultConnect" />

      <div class="">
        <span style="margin-right: 10px;">关联项目</span>
        <span style="color: #409eff; cursor: pointer;" @click="handleView">{{ detailParams.projectName }}</span>
      </div>
      <div style="font-size: 18px; font-weight: bold;margin-top: 20px;">相关附件：</div>
      <div v-if="detailParams.annexList && detailParams.annexList.length > 0" style="display: flex;flex-direction: column;">
        <span v-for="(item, i) in detailParams.annexList" :key="i" style="margin: 10px 10px 0 0;color: #409eff; cursor: pointer;" @click="handleClickFiles(item)">
          {{ '附件: ' }} <span>{{ item.annexName }}</span>
        </span>
      </div>
      <el-button v-if="isShowReply" class="confirm-btn" type="primary" @click="handleConfirm">确定</el-button>
      <ViewProjectDetail ref="viewProjectDetail" />
    </div>
  </el-dialog>
</template>
<script>
// msgDetail
import { replyMsg, msgDetail } from '@/api/inner-msg/index.js'
import { formatDate } from '@/utils/index.js'
import IFrame from '@/components/iFrame/index'
import VideoPlayer from '@/components/videoPlayer'
import { getResultDetail, getProTypes } from './../../api';
import ViewProjectDetail from './../../projectList/components/viewDetail'
export default {
  // 组件名称
  name: 'ViewNews',
  components: {
    IFrame,
    VideoPlayer,
    ViewProjectDetail
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      dialogVisible: false,
      detailParams: {},
      total: 0,
      pageIndex: 0,
      loading: true,
      studentId: null,
      pdfList: [],
      remark: ''
    }
  },
  computed: {
    isShowReply() {
      return this.detailParams.status === '0' || this.detailParams.status === '1' || this.detailParams.status === '4'
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.init()
  },
  // 组件方法
  methods: {

    async columnListApi() {
      let columnList = [];
      const { code, data } = await getProTypes();
      if (code === 0 && data && data && data.length > 0) {
          columnList = data.map(v => {
              return {
                  label: v.name,
                  value: v.id
              }
          });
      }
      return columnList;
    },
    open(id) {
      this.dialogVisible = true
      this.handleGetDetail(id)
    },
    async handleGetDetail(id) {
      const { code, data } = await getResultDetail({ id })
      this.detailParams = {
        ...data
      }
    },
    async init() {
      setTimeout(() => {
        this.loading = false
      }, 2000)
    },
    async handleView() {
      this.columnList = await this.columnListApi();
      this.$refs.viewProjectDetail && this.$refs.viewProjectDetail.open({
        popType: 'view', 
        id: this.detailParams.projectId, 
        title: this.detailParams.title, 
        columnList: this.columnList
      })
    },

    handleClose() {
      this.dialogVisible = false
      this.detailParams = {}
      // this.$emit('handleClose');
    },
    handleClickFiles(row) {
      if (row.annexUrl) {
        window.open(row.annexUrl, '_blank')
      }
    }
  }
}
</script>
<style lang='scss'>
  .viewresult-content-page {
    .el-dialog__header {
      display: none;
    }

    .title {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
    }

    .push-date-box {
      text-align: center;
      padding: 5px 0;
      border: 1px solid #eee;
      margin: 10px 0;
      border-radius: 4px;
    }

    .edit-content {
      width: 100%;
      min-height: 300px;
      img {
        display: inline-block;
        max-width: 100%;
      }
    }
    .main-content {
      position: relative;

      .el-icon-close {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 18px;
        cursor: pointer;
      }
    }
  }

</style>
